<template>
  <view class="share_">
    <view class="view_wrapper">
      <!--   通过设置isCanvasToTempFilePath自动生成图片并在 @success 事件里接收海报临时路径 -->
      <l-painter
          isCanvasToTempFilePath
          @success="submitFn"
          hidden
          css="width: 750rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%);position: relative;"
          path-type="base64"
          useCORS
          ref="painter"
          @fail="failFn"
          @done="doneFn"
          @progress="progressFn"
          isCanvasToTempFilePath
          hidden
      >
        <l-painter-view css="background: red;width: 100%;height:100%;">
          <l-painter-view
              css="width: 100%; height: 100%; box-sizing: border-box;"
          >
            <l-painter-image
                src="http://test.api.ylnumber.cn/file/test/productImage/20230627/ebc9c9da15e84ce0b97526dd4605e5b9.png"
                css="width: 100%; height: 100%; object-fit=scale-down;"
            />
          </l-painter-view>
          <l-painter-view
              css="padding:0 32rpx;position: absolute;left:0;bottom:200rpx;box-sizing: border-box;width: 750rpx;"
          >
            <l-painter-view
                css="position: absolute;left:0;bottom:200rpx;width: 152rpx; height: 152rpx;"
            >
              <l-painter-qrcode
                  :text="qRcode"
                  css="width: 152rpx; height: 152rpx"
              />
              <!--              <image :src="qRcode" css="width: 152rpx; height: 152rpx;" />-->
            </l-painter-view>
          </l-painter-view>
        </l-painter-view>
      </l-painter>
      <image :src="url" class="image_img" @longtap="shareImg(url)" />
    </view>
    <view class="share_wrapper">
      <view class="down_" @click="downFn">
        <image
            src="http://test.api.ylnumber.cn/file/test/productImage/20230630/6368125fe2584aa18e13c44aba754f9e.png"
        ></image>
        <view>下载海报</view>
      </view>
      <view class="copy_">
        <button open-type="share">
          <view>分享给好友</view>
        </button>
        <image
            src="http://test.api.ylnumber.cn/file/test/productImage/20230630/c278ce15b1d249179efc3f51d4cdb670.png"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import { getWxAcesstoken } from "@/api/share/share";

export default {
  name: "index.vue",
  components: {},
  data() {
    return {
      userInfoServer: "",
      // path: "",
      InvitationCode: "165487",
      title: "分享",
      bac: {
        background: "#fff",
      },
      show: true,
      url: "",
      qRcode: "",
    };
  },
  watch: {
    url: {
      //你的绑定属性
      handler(value) {
        this.$nextTick(() => {
          //回调延迟到下次 DOM 更新循环之后执行
          if (value) {
            console.log(value, "value");
            uni.hideLoading(); //结束加载框
          }
        });
      },
    },
    immediate: true, //初始handler
    deep: true, //开启深度监听，多级属性
  },
  onLoad() {
    uni.showLoading({
      //加载框
      title: "加载中",
    });
    this.qRcode = "";
  },
  onShow() {
    this.userInfoServer = uni.getStorageSync("userInfoServer") || "";
    this.getToken();
  },
  /**
   * 分享当前页面
   */
  onShareAppMessage(e) {
    console.log(e, "分享");
    return {
      title: "一个兴趣社交购物平台",
      imageUrl:BASE_URL_IMAHE+'file/test/productImage/20230710/285ce91ce9774534b5c57947ca7c96c9.jpg',
      path: `/pages/index/index?parentInviteCode=${
          uni.getStorageSync("phoneNumber") || ""
      }`,
    };
  },
  methods: {
    //获取token
    async getToken() {
      uni.showLoading({
        //加载框
        title: "加载中",
      });
      const res = await getWxAcesstoken();
      console.log(res, "res 获取token");
      if (res) {
        const openId = this.userInfoServer.wxOpenid
            ? this.userInfoServer.wxOpenid
            : "";
        uni.request({
          url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${res}`, //仅为示例，并非真实接口地址。
          method: "POST",
          header: {
            ContentType: "application/json;charset=UTF-8",
            Accept: "application/json",
          },
          data: {
            scene: openId,
          },
          responseType: "arraybuffer",
          success: (res) => {
            let base64Str = uni.arrayBufferToBase64(res.data);
            // 将转换后的 Base64 字符串作为 img 标签的 src 属性
            this.qRcode = "data:image/png;base64," + base64Str;
            // console.log(this.qRcode);
            console.log(res, "小程序码");
          },
        });
      }
    },

    shareImg(url) {
      console.log(url, "url");
    },

    //复制链接
    copyFn() {
      console.log("复制链接");
      // text_copy_event(this.qRcode);
    },

    //下载图片
    downFn() {
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: "png",
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: "url",
        quality: 1,
        success: (res) => {
          console.log(res, "保存图片");
          if (res.tempFilePath) {
            uni.showToast({
              title: `保存成功`,
              icon: "success",
              duration: 2000,
            });
          }
          // 非H5 保存到相册
          // #ifdef MP-WEIXIN || APP-PLUS
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function () {
              console.log(res, "res");
              console.log("save success");
            },
          });
          //#endif

          // H5 提示用户长按图另存
          // 图片查看事件
          var value = res.tempFilePath || null;
          if (value != null) {
            uni.previewImage({
              current: value,
              urls: [value],
            });
          } else {
            uni.showToast("宣传图片地址有误");
          }
        },
      });
    },
    //生成图片成功
    submitFn(e) {
      console.log(e, "e");
      this.url = e;
    },
    //绘制进度
    progressFn(num) {
      uni.showLoading({
        //加载框
        title: "加载中",
      });
      console.log(num, "绘制进度");
    },
    //绘制失败
    failFn(error) {
      uni.hideLoading();
      console.log(error, "err");
    },
    //绘制成功
    doneFn(res) {
      uni.hideLoading();
      console.log(res, "绘制成功");
    },
  },
};
</script>

<style scoped lang="scss">
.share_ {
  display: flex;
  flex-direction: column;
  .view_wrapper {
    flex-grow: 1;
    height: 100vh;
    width: 100vw;
    //padding-top: rpx(44);
  }

  .share_wrapper {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: rpx(32);
    width: 100%;
    > view {
      > image {
        width: rpx(152);
        height: rpx(47);
        vertical-align: middle;
      }
    }
    > .down_ {
      margin-right: rpx(15);
      position: relative;

      > view {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: rpx(140);
        height: rpx(34);
        background: linear-gradient(180deg, #c6e4ff 0%, #e4ffc6 100%);
        border-radius: rpx(22);
        //border: rpx(0.5) solid #000000;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: rpx(16);
        font-weight: bold;
        color: #353535;
      }
    }
    > .copy_ {
      //background: #824dff;
      //color: #ffffff;
      //font-size: rpx(15);
      //font-weight: 400;

      position: relative;
      button {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: rpx(140);
        height: rpx(34);
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        padding: rpx(0);
        > view {
          width: rpx(140);
          height: rpx(34);
          background: linear-gradient(180deg, #c6e4ff 0%, #e4ffc6 100%);
          border-radius: rpx(22);
          //border: rpx(1) solid #000000;
          display: flex;
          justify-content: center;
          align-items: center;

          font-size: rpx(16);
          font-weight: bold;
          color: #353535;
        }
      }
    }
  }
}

.image_img {
  width: 100%;
  height: 100vh;
  //background: red;
  vertical-align: middle;
}
</style>
